<template>
    <div class="tinymce-editor">
        <editor
            v-model="myValue"
            :init="init"
            :disabled="disabled"
            ref="myIframe"
        ></editor>
        <custom-tag
            v-if="disabled == false"
            ref="editorCustomtag"
            :tag-list="tagList"
            @addParam="addParams"
        ></custom-tag>
    </div>
</template>
<script>
import CustomTag from "@/views/contractTemplate/components/customTag.vue";
import * as contractTemplateApi from "@/api/contractTemplate/contractTemplate";
import { getToken } from "@/utils/auth";
import { addOss } from "@/api/system/oss";
// 引入组
import tinymce from "tinymce";
import Editor from "@tinymce/tinymce-vue";
// 引入富文本编辑器主题的js和css
import "tinymce/themes/silver/theme.min.js";
import "tinymce/icons/default/icons.js";
// 扩展插件
// import "tinymce-plugin"; //作为一些插件的必要依赖
import "tinymce/themes/silver";
import "tinymce/plugins/paste";
import "tinymce/plugins/image";
import "tinymce/plugins/link";
import "tinymce/plugins/charmap";
import "tinymce/plugins/print";
import "tinymce/plugins/directionality";
import "tinymce/plugins/noneditable";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/wordcount";
import "tinymce/plugins/preview";
import "tinymce/plugins/fullscreen";
import "@npkg/tinymce-plugins";

export default {
    components: {
        Editor,
        CustomTag,
    },
    props: {
        value: {
            type: String,
            default: "",
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        plugins: {
            type: [String, Array],
            default:
                "link lists image  charmap table wordcounts table imagetools importcss preview fullscreen directionality noneditable",
        },
        toolbar: {
            type: [Boolean, String, Array],
            default:
                "bold italic underline strikethrough | styleselect | fontsizeselect fontselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | ltr rtl | outdent indent blockquote | undo redo | charmap | removeformat | assignment | table | image |  preview |fullscreen",
        },
        tagList: {
            type: Array,
            default: () => {
                return [];
            },
        },
    },
    data() {
        return {
            myEditor: null,
            init: {
                doctype: "<!DOCTYPE html>",
                element_format: "html",
                language_url: "/tinymce/langs/zh_CN.js",
                language: "zh_CN", //语言
                skin_url: "/tinymce/skins/ui/oxide", //主题路径
                min_height: 700,
                skeletonScreen: true,
                plugins: this.plugins, //插件
                toolbar: this.toolbar, //工具栏
                branding: false, //技术支持(Powered by Tiny || 由Tiny驱动)
                menubar: false, //菜单栏
                theme: "silver", //主题
                zIndex: 1101,
                statusbar: false,
                // table_icons: {// 以下下为默认配置
                //   'align-right-table': '<svg width="24" height="24"><path d="M5 5h14c.6 0 1 .4 1 1s-.4 1-1 1H5a1 1 0 1 1 0-2zm6 4h8c.6 0 1 .4 1 1s-.4 1-1 1h-8a1 1 0 0 1 0-2zm0 8h8c.6 0 1 .4 1 1s-.4 1-1 1h-8a1 1 0 0 1 0-2zm-6-4h14c.6 0 1 .4 1 1s-.4 1-1 1H5a1 1 0 0 1 0-2z" fill-rule="evenodd"></path></svg>',
                //   'align-left-table': '<svg width="24" height="24"><path d="M5 5h14c.6 0 1 .4 1 1s-.4 1-1 1H5a1 1 0 1 1 0-2zm0 4h8c.6 0 1 .4 1 1s-.4 1-1 1H5a1 1 0 1 1 0-2zm0 8h8c.6 0 1 .4 1 1s-.4 1-1 1H5a1 1 0 0 1 0-2zm0-4h14c.6 0 1 .4 1 1s-.4 1-1 1H5a1 1 0 0 1 0-2z" fill-rule="evenodd"></path></svg>',
                //   'align-center-table': '<svg width="24" height="24"><path d="M5 5h14c.6 0 1 .4 1 1s-.4 1-1 1H5a1 1 0 1 1 0-2zm3 4h8c.6 0 1 .4 1 1s-.4 1-1 1H8a1 1 0 1 1 0-2zm0 8h8c.6 0 1 .4 1 1s-.4 1-1 1H8a1 1 0 0 1 0-2zm-3-4h14c.6 0 1 .4 1 1s-.4 1-1 1H5a1 1 0 0 1 0-2z" fill-rule="evenodd"></path></svg>'
                // },
                fontsize_formats:
                    "8pt 10pt 12pt 14pt 16pt 18pt 20pt 22pt 24pt 36pt",
                font_formats:
                    "微软雅黑='微软雅黑';宋体='宋体';黑体='黑体';仿宋='仿宋';楷体='楷体';隶书='隶书';幼圆='幼圆';",
                style_formats: [
                    {
                        title: "Line Height",
                        items: [
                            {
                                title: "1",
                                block: "p",
                                styles: { "line-height": "1.0" },
                            },
                            {
                                title: "1.5",
                                block: "p",
                                styles: { "line-height": "1.5" },
                            },
                            {
                                title: "1.75",
                                block: "p",
                                styles: { "line-height": "1.75" },
                            },
                            {
                                title: "2",
                                block: "p",
                                styles: { "line-height": "2" },
                            },
                            {
                                title: "3",
                                block: "p",
                                styles: { "line-height": "3" },
                            },
                            {
                                title: "4",
                                block: "p",
                                styles: { "line-height": "4" },
                            },
                            {
                                title: "5",
                                block: "p",
                                styles: { "line-height": "5" },
                            },
                        ],
                    },
                ],
                setup: (editor) => {
                    let _this = this;
                    _this.myEditor = editor;
                    editor.ui.registry.addButton("assignment", {
                        text: `<i class="el-icon-position" style="font-size: 18px"></i>`,
                        tooltip: "选择参数",
                        onAction: () => {
                            _this.$refs.editorCustomtag.show();
                        },
                    });
                },
                style_formats_merge: false, // 此选项可以设置TinyMCE,是将style_formats设置中的样式附加到默认样式格式还是完全替换它们
                style_formats_autohide: true, //（隐藏当前不可用的样式列表）
                automatic_uploads: true,
                convert_urls: false,
                images_upload_url:
                    process.env.VUE_APP_BASE_API + "/system/oss/upload", // 上传的图片服务器地址,
                images_upload_handler: (blobInfo, success, failure) => {
                    const formData = new FormData();
                    formData.append("Authorization", "Bearer " + getToken());
                    formData.append("file", blobInfo.blob());
                    addOss(formData)
                        .then((res) => {
                            console.log(res.code);
                            if (res.code == 200) {
                                let file = res.data.url;
                                success(file);
                                return;
                            }
                            failure("上传失败");
                        })
                        .catch((error) => {
                            console.log(error);
                            failure("上传出错");
                        });
                },
            },
            myValue: this.value,
        };
    },
    mounted() {
        tinymce.init({
            doctype: "<!DOCTYPE html>",
            element_format: "html",
        });
        setTimeout(() => {
            this.$nextTick(() => {
                let iframeDocument =
                    document.getElementsByTagName("iframe")[0].contentDocument;
                iframeDocument.body.style.backgroundColor = "#fff";
                iframeDocument.body.style.margin = "20px auto";
                iframeDocument.body.style.width = "740pt";
                iframeDocument.body.style.minWidth = "740pt";
                iframeDocument.body.style.minHeight = "600px";
                iframeDocument.body.style.boxShadow = "0 0 10px #666666";
                iframeDocument.body.style.position = "absolute";
                iframeDocument.body.style.left = "50%";
                iframeDocument.body.style.transform = "translateX(-50%)";
                // iframeDocument.body.style.padding = '61.8pt 72pt 61.8pt 72pt ';
            });
        }, 1000);
    },
    methods: {
        addParams(item) {
            const id = item.itemKey;
            const value = "#" + item.itemValue + "#";
            const param = `<span class="mceNonEditable" data-param-key="${id}" style="color: red">${value}</span>`;
            this.myEditor.insertContent(param);
        },
    },
    watch: {
        value(newValue) {
            this.myValue = newValue;
        },
        myValue(newValue) {
            this.$emit("input", newValue);
        },
    },
};
</script>

<style lang="scss" scoped>
::v-deep .mce-content-body {
    overflow-wrap: break-word;
    word-wrap: break-word;
    display: flex;
    justify-content: center;
}
</style>
